<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>门禁</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">

    <script src="../../js/dashboard/jquery.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/select.js"></script>

</head>
<script>
    startDate = {};
    endDate = {};
    devIdSelect = {};
    spaceSelect = {};
    arr = {};
</script>

<body>
    <form class="layui-form" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">策略名称：</label>
            <div class="layui-input-block">
                <input type="text" name="strategyName" lay-verify="title" autocomplete="off" placeholder="请输入策略名称"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">策略描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" lay-verify="describe" autocomplete="off" placeholder="请输入策略描述"
                    class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">请选择星期</label>
            <div class="layui-input-block">
                <input type="checkbox" name="week1" title="周一" checked>
                <input type="checkbox" name="week2" title="周二" checked>
                <input type="checkbox" name="week3" title="周三" checked>
                <input type="checkbox" name="week4" title="周四" checked>
                <input type="checkbox" name="week5" title="周五" checked>
                <input type="checkbox" name="week6" title="周六">
                <input type="checkbox" name="week7" title="周日">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">时间点选择</label>
            <div class="layui-input-block">
                <input type="text" id="time1" name="startTime" />
            </div>
            <div class="layui-input-block">
                <input type="text" id="time2" name="endTime" />
            </div>
        </div>

        <div class=" layui-form-item">
            <label class="layui-form-label">是否空间</label>
            <div class="layui-input-block">
                <input type="radio" name="space" value="是" title="是" checked="false" lay-filter="isSpace">
                <input type="radio" name="space" value="否" title="否" checked="true" lay-filter="isSpace">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><b>空间选择：</b></label>

            <div class="layui-input-inline">
                <select name="space" id="spaceId" lay-filter="space-filter">
                    <option value="-1">请选择空间</option>
                </select>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><b>设备选择：</b></label>

            <div class="layui-input-inline layui-form" lay-filter="devId" style="width: 70%;">
                <div name="dev" id="devIdSelect" class="xm-select-demo" style="width: 50%;">
                    <option value="-1">请选择设备</option>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开关-默认开</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="switch" lay-skin="switch" lay-filter="switchTest"
                    lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit"
                    style="float:right;margin-right: 10%;">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


</body>
<script>
    function clearDevXmSelect() {

        devIdSelect.update({
            data: [],
            autoRow: true
        })
    }
    layui.use('form', function () {
        var form = layui.form;
        form.on('select(space-filter)', function (data) {
            getSpaceDev(data.value)
        });
        form.on('radio(isSpace)', function (data) {
            if (data.value == "是") { document.getElementById("devChoose").style.display = 'none'; }
            if (data.value == "否") { document.getElementById("devChoose").style.display = 'inline'; clearDevXmSelect(); }

        });
        //监听提交
        form.on('submit(formSubmit)', function (data) {
            postdata = {};
            postdata.strategyName = data.field.strategyName;
            postdata.startTime = data.field.startTime;
            postdata.endTime = data.field.endTime;
            postdata.strategyStatus = data.field.strategyStatus;
            postdata.description = data.field.description;
            postdata.spaceId = spaceSelect;
            // postdata.deviceId = data.field.dev;
            i = 0;j=0;
            postdata.weeks = [];
            if (data.field.week1 == "on") { postdata.weeks[i++] = j; } j++;
            if (data.field.week2 == "on") { postdata.weeks[i++] = j; } j++;
            if (data.field.week3 == "on") { postdata.weeks[i++] = j; } j++;
            if (data.field.week4 == "on") { postdata.weeks[i++] = j; } j++;
            if (data.field.week5 == "on") { postdata.weeks[i++] = j; } j++;
            if (data.field.week6 == "on") { postdata.weeks[i++] = j; } j++;
            if (data.field.week7 == "on") { postdata.weeks[i++] = j; } j++;
            postdata.weeks = postdata.weeks.toString();
            if (data.field.switch == "on") { postdata.strategyStatus = 1; }
            postdata.deviceId = devIdSelect.getValue('valueStr').split(',');
            console.log('postdata', postdata);
            $.ajax({
                type: "POST",
                url: "/strategy/add",
                data: JSON.stringify(postdata),
                dataType: 'json',
                contentType:"application/json;charset=utf-8",
                success: function (data) {
                    //当你在iframe页面关闭自身时
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    location.reload();
                    parent.layer.close(index); //再执行关闭
                },
                error: function () {
                    alert("网络异常！");
                }
            })
            return false;
        });
    });
</script>

<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            type: 'time',
            elem: '#time1', //指定元素 
            value: new Date(), trigger: 'click',
            calendar: true,
            ready: function (date) {
                console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            },
            done: function (value, date, endDate) {
                startDate = date;
            }
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#time2', //指定元素 
            type: 'time',
            value: new Date(), trigger: 'click',
            calendar: true,
            ready: function (date) {
                console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            },
            done: function (value, date, endDate) {
                endDate = date;
            }
        });
    });
</script>

<script>
    layui.use('form', function () {
        getSpace();
    })

    function getSpace() {
        $.ajax({
            url: "/space/getSpaceList",
            type: "get",
            dataType: 'json',
            async: true, //是否异步请求
            success: function (res) {
                for (var i = 0; i < res.length; i++) {
                    $("#spaceId").append("<option value=\"" + res[i].spaceId + "\">" + res[i].spaceName + "</option>"); //需要修改append为重置
                }
                //重新渲染
                layui.form.render("select");
            }
        });
    }

    function initXmSelect() {
        devIdSelect = xmSelect.render({
            el: document.querySelector('#devIdSelect'),
            toolbar: {
                show: true,
                list: ['ALL', 'CLEAR', 'REVERSE']
            },
            filterable: true,
            paging: true,
            pageSize: 10,
            on: function (data) {
                //arr:  当前多选已选中的数据
                arr = data.arr;
            }
        })
    }
    initXmSelect();
    function getSpaceDev(spaceId) {
        console.log(spaceId);
        $.ajax({
            url: "/space/getSpaceDeviceList?spaceId=" + spaceId,

            type: "get",
            dataType: 'json',
            async: true, //是否异步请求
            success: function (res) {
                console.log(res);
                devData = [];

                for (var i = 0; i < res.length; i++) {
                    devData[i] = {};
                    devData[i].name = res[i].name;
                    devData[i].value = res[i].id;
                }
                //重新渲染
                devIdSelect.update({
                    data: devData,
                    autoRow: true
                })
            }
        });
    }
</script>

</html>